import './index.scss'
import {Card,Form,Input,Button} from 'antd'
import logo from "../../assets/logo.png"
import { useNavigate} from "react-router-dom"
// 从中间件中导入触发状态更新的钩子函数
import {useDispatch} from 'react-redux'
import { fetchLogin } from '../../store/modules/user'
import { message } from 'antd'
// import axios from 'axios'
const Login=()=>{
  // 实例化钩子函数不能写在函数里面
const dispatch=useDispatch();
const navigate=useNavigate();
// 点击登录
  const onFinish=async (values)=>{
    var raw = {
      "mobile":  `${values.mobile}`,
      "code": "246810"
    }
    console.log(raw,"raw");
// 触发异步action函数fetxhLogin
await dispatch(fetchLogin(raw));
navigate('/')
message.success('登录成功')



  }
  return(
    <div className="login">
      <Card className='login-container'>
        <img className='login-logo' src={logo} alt="" />
        <Form validateTrigger='onBlur' onFinish={onFinish}>
          <Form.Item name='mobile' rules={[
            {
              required: true,
              message: '请输入用户名!'
            },{
              pattern: /^1[3456789]\d{9}$/,
              message: '请输入正确的手机号!'
            }
          ]}>
            <Input size='large' placeholder="请输入手机号"/>
          </Form.Item>
          <Form.Item name='code' rules={[
            {
              required: true,
              message: '请输入验证码!'
            },{
              pattern: /^[0-9]{6}$/,
              message: '请输入6位数字验证码!'
            }
          ]}>
            <Input size='large' placeholder="请输入验证码"/>
          </Form.Item>
          <Form.Item >
            <Button type='primary' htmlType='sumit' size='large' block>
    登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
export default Login